<template>
  <div>
    <div ref="radar" style="width: 100%; height: 340px" />
  </div>
</template>

<script>
// 导入 echarts
import * as echarts from "echarts";

export default {
  mounted() {
    this.echartInit();
  },
  methods: {
    echartInit() {
      const myChart = echarts.init(this.$refs.radar);
      //   图标自适应
      window.onresize = function () {
        myChart.resize();
      };
      window.onresize = function () {
        myChart.resize();
      };
      const option = {
        color: [
          "#7390FF",
          "#56D99C",
          "#64B8FE",
          "#FFC53D",
          "#FF4D4F",
          "#94D6FE ",
          "#08979C",
          "#FF9D4D",
        ],
        tooltip: {
          trigger: "item",
        },
        // 图例
        legend: {
          // 垂直方向排列
          orient: "vertical",
          icon: "circle", 
          // 图例项的icon,类型包括 circle(圆形),rect(正方形),
          //roundRect(圆角正方形),triangle(三角形),diamond(菱形),
          //pin(大头针行),arrow(箭头形),none(无图例项的icon)
          right: "5%",
          top: "-2%",
          // bottom:"0%"
          // 图例的大小
          itemWidth: 12,
          itemHeight: 12,
          formatter: function(name) {
          var index = 0;
           var clientlabels = ['JG事件','事件处置','时间线索','协查请求','协办结果','预警效应','策略变更','对象刻画'];
           var clientcounts = [5,24,2,29,16,18,13,12];
           clientlabels.forEach(function(value,i){
               if(value == name){
                   index = i;
               }
           });
           return name + "           " + clientcounts[index]+'';
       },
          // 图例组件文字的大小
          textStyle: {
            //图例文字的样式
            color: "#000000",
            fontSize: 14,
            lineHeight: 30,
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            // 修改饼形图的大小
            radius: ["40%", "60%"],
            // 水平位置、垂直位置
            center: ["40%", "40%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
              
            },
            // 点击后显示饼图里面的文字
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 5, name: "JG事件  " },
              { value: 24, name: "事件处置" },
              { value: 2, name: "时间线索" },
              { value: 29, name: "协查请求" },
              { value: 16, name: "协办结果" },
              { value: 18, name: "预警响应" },
              { value: 13, name: "策略变更" },
              { value: 12, name: "对象刻画" },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
